import React from "react"
import './index.scss'
import Rate from '../Rate'
import storage from "../../utils/storage"
import {collectProduct,cancelCollect} from "../../http/api"

const BlockTitle=props=>{
        const {text} = props
        return <div className='block-title'>
                <div className="bar"/>
                <span className='text'>{text}</span>
        </div>
}
const CompanyBlock = props=>{
        const  {iconUrl,identityStatus,memberId,merchantName,type} = props.dataSource
        const identity = [
                <span className="tag">未验证</span>,
                <span className='tag'>验证中</span>,
                <span className="tag">已验证</span>
        ][identityStatus]
        const companyTypeText = [
                '',
                <span className="tag">个人</span>,
                <span className="tag">企业</span>
        ][type]
        return <div className='company-block'>
                <div className="avatar-wrapper"><div className="avatar">
                        {
                                iconUrl&&<img src={iconUrl} alt=""/>
                        }
                </div></div>
                <div className="desc">
                        <div className="line">{merchantName}</div>
                        <div className="line">
                                {companyTypeText}
                                {identity}
                        </div>
                </div>
                <div className="btn-wrapper">
                        <div className="btn" onClick={()=>{
                                storage.set('currentClickItemActive',props.dataSource)
                                props.onClick(memberId)
                        }}>全部商品</div>
                </div>
        </div>
}
const RatingItem =props=>{
        const {commentInfo,icon,starLevel,userName} = props?.dataSource||{}
        return <div className='rating-item'>
                <div className="desc">
                        <div className="avatar-wrapper">
                                <div className="avatar">
                                        <img src={icon} alt=""/>
                                </div>
                        </div>
                        <div className="line">
                                <div className="name">{userName}</div>
                                <div className="rate"><Rate count={starLevel} type='small'/></div>
                        </div>
                </div>
                <div className="text">
                        {commentInfo}
                </div>
        </div>
}
class BottomFixedBlock extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        status:0,
                }
        }
        componentWillUpdate (nextProps, nextState, nextContext) {
                if (nextProps.status !== this.state.status) {
                        this.setState({status:nextProps.status})
                }
        }
        handleOnCollection=()=>{
                const {status,} = this.state
                const {id} = this.props
                const active = ()=>{
                        collectProduct(id).then(()=>{handle()})
                }
                const cancel = ()=>{
                        cancelCollect(id).then(()=>{handle()})
                }
                const handle = ()=>{
                        this.setState({status:!!status?0:1})
                }
                if (status === 1) {
                        cancel()
                }else {
                        active()
                }
        }
        render () {
                const {status} = this.state
                const {tel} = this.props
                return <div className='bottom-fixed-block'>
                        <div className="star-wrapper">
                                <div className={`star ${!!status&&'active'}`} onClick={this.handleOnCollection}/>
                                <div className={`label ${!!status&&'active'}`}>{!!status?'已关注':'关注'}</div>
                        </div>
                        <a className="btn call" href={`tel:${tel}`}>拨打电话</a>
                        <div className="btn buy">我要买</div>
                </div>
        }
}
export default {
        BlockTitle,
        CompanyBlock,
        RatingItem,
        BottomFixedBlock
}
